<template>
    <el-dialog :model-value="props.visible" title="包装件配料申请" center width="50%" @close="handleClose" >
        <div id="pdf-content" ref="printArea">
            <el-form ref="formRef" :model="formData" style="border: solid 1px black;width: 100%">
                <table class="order-table">
                    <colgroup>
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                        <col style="width: 12.5%;">
                    </colgroup>
                    <caption>
                        <h3>配料单</h3>
                    </caption>
                    <tr>
                        <td colspan="2" class="table-title">产品名称</td>
                        <td colspan="2">{{ props.orderDetails.packingName }}</td>
                        <td colspan="2" class="table-title">生产数量</td>
                        <td colspan="2">{{ props.orderDetails.produceNumber }}</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="table-title">生产单号</td>
                        <td colspan="6" class="img-col">
                            <img class="code-image" :src="props.orderDetails?.codeUrl" alt="">
                            <div class="order-number">{{ props.orderDetails?.packingProductCode }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="3" class="table-title">部件名称</td>
                        <td colspan="1" class="table-title">总需求数量</td>
                        <td colspan="2" class="table-title">配料数量</td>
                        <td colspan="1" class="table-title">当前库存</td>
                    </tr>
                    <tr>
                        <td :rowspan="props.orderDetails.productDetailVoList.length+1">通用部件</td>
                    </tr>
                    <tr v-for="(item, index) in formData" :key="index+1">
                        <td colspan="3">{{ item.productName }}</td>
                        <td colspan="1">{{ item.proportionNumber }}</td>
                        <td colspan="2">
                            <el-form-item prop="number" style="display: flex; align-items: center; ;justify-content: center;">
                                <el-input type="number" v-if="item.isInput" v-model.number="formData[index].number" @dblclick="handleChangeInput(index)"></el-input>
                                <span style="display: block; width: 100%;font-size: 16px; color: #68C23D;" v-else @dblclick="handleChangeInput(index)">{{item.number}}</span>
                            </el-form-item>
                        </td>
                        <td>{{ item.inventoryNumber }}</td>
                    </tr>
                </table>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-tooltip content="输入完成配料数量，并且库存大于配料数量后方可打印">
                    <el-button size="large" :disabled="shouldSubmit" @click="onClickPrint" >打印</el-button>
                </el-tooltip>
                
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { printApplyIngredientsOrderApi } from '@/api/sj/productManagement/packageOrder';

const props = defineProps<{
    visible: boolean,
    orderDetails: any
}>();

const emits = defineEmits(['close']);
const printArea = ref<HTMLElement | null>(null);

const formRef = ref<FormInstance>();
const formData = ref<any[]>([]);
const shouldSubmit = ref(false);

watch(()=>props.orderDetails, (newData)=>{
    const itemList = newData.productDetailVoList.map((item: any)=>{
        return {
            number:0,
            productId: item.id,
            bomProductionId: newData.id,
            productName: item.productName,
            inventoryNumber: item.inventoryNumber,
            proportionNumber: item.proportionNumber,
            isInput: false
        }
    });
    formData.value = itemList;
}, {deep: true});

const handleChangeInput = (index: number) => {
    formData.value[index].isInput = !formData.value[index].isInput;
};

watch(()=>formData.value, (newData)=>{
    for(let item of newData){
            let should = item.isInput || (item.number >= item.inventoryNumber);
            shouldSubmit.value = should;
            if(should){
                break;
            }
        };
},{deep:true});

const onClickPrint = async () => {
    if(printArea.value){
        
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        
        const submitData = {
            id: props.orderDetails.id,
            dataList:[...formData.value]
        };
        await printApplyIngredientsOrderApi(submitData);

        location.reload() // 可选：刷新页面以恢复事件监听
    };
};

const handleClose = () => {
    emits('close');
};

</script>

<style lang="scss" scoped>
#pdf-content{
    display: flex;
    justify-content: center;
    flex-flow:wrap
    
}

.order-number{
    color: #69AFF0
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 100%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td:not(.step-col){
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 300px;
            
        }
        .order-numbe{
            color: #69AFF0
        }
        .code-image{
            height: 80px
        }
    }
    .table-title{
        font-weight:bolder;
    }
    .step-col{
        border: 1px solid black;
        padding: 10px 10px 0 10px;
    }
}
</style>